<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <!--自引入分页插件-->
    <link rel="stylesheet" type="text/css" href="jquery/static/jquery.sPage.css">
    <%--<script src="jquery/jquery.min.js"></script>--%>
    <script type="text/javascript" src="jquery/static/jquery.sPage.js"></script>
    <!--原有的分页插件-->
    <%--<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">--%>
    <%--<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>--%>
    <%--<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>--%>

    <script type="text/javascript">

        $(function () {
            /*
            * 使用日期插件
            * 步骤：
            * 1.导入插件包：插件包要在jquery与bootstrap包下面再引入，从上至下加载
            *   jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js
            *   jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js
            *   （webapp/jquery/bootstrap-datetimepicker-master目录下是插件包）
            * 2.添加下面的插件代码
            * 3.在需要使用日期插件的标签引入
            * */
            $(".time").datetimepicker({
                minView: "month",
                language: 'zh-CN',
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayBtn: true,
                pickerPosition: "bottom-left"
            });

            // 为创建模态框绑定事件
            $("#addBtn").click(function () {
                // 请求后端获取所有者信息列表展示到下拉框
                $.ajax({
                    url: "/crm/workbench/activity/getUserList.do",
                    data: {},
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            // 获取到数据填充到下拉框
                            var html = "<option></option>";
                            $.each(data.data, function (i, n) {
                                html += "<option value='" + n.id + "'>" + n.name + "</option>";
                            });
                            $("#create-marketActivityOwner").html(html);

                            // 将当前已登录的用户默认展示在下拉框(在js中是用el表达式要在双引号中"$ {}")
                            var id = "${sessionScope.user.id}";
                            $("#create-marketActivityOwner").val(id);
                        } else {
                            // 没有用户数据,不处理显示为空
                        }
                    }
                });
                // 打开添加模态框
                $("#createActivityModal").modal("show");
            });

            // 保存按钮绑定添加事件
            $("#saveBtn").click(function () {
                $.ajax({
                    url: "/crm/workbench/activity/save.do",
                    data: {
                        "owner": $.trim($("#create-marketActivityOwner").val()),
                        "name": $.trim($("#create-marketActivityName").val()),
                        "startDate": $.trim($("#create-startTime").val()),
                        "endDate": $.trim($("#create-endTime").val()),
                        "cost": $.trim($("#create-cost").val()),
                        "description": $.trim($("#create-describe").val())
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            // 清空模态框中数据(jquery对象使用reset方法无效需要转换为dom对象调reset方法才可以重置表单)
                            $("#activityForm")[0].reset();

                            // 关闭添加模态窗
                            $("#createActivityModal").modal("hide");

                            // 添加成功刷新列表
                            pageList(1, 5);
                        } else {
                            // 添加失败
                            alert(data.msg);
                        }
                    }
                })
            });

            // 更新按钮绑定添加事件
            $("#updateBtn").click(function () {
                $.ajax({
                    url: "/crm/workbench/activity/update.do",
                    data: {
                        "id": $("#edit-activityId").val(),
                        "owner": $.trim($("#edit-marketActivityOwner").val()),
                        "name": $.trim($("#edit-marketActivityName").val()),
                        "startDate": $.trim($("#edit-startTime").val()),
                        "endDate": $.trim($("#edit-endTime").val()),
                        "cost": $.trim($("#edit-cost").val()),
                        "description": $.trim($("#edit-describe").val())
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            // 关闭编辑模态窗
                            $("#editActivityModal").modal("hide");

                            // 更新成功刷新列表
                            pageList(1, 5);
                        } else {
                            // 更新失败
                            alert(data.msg);
                        }
                    }
                })
            });

            // 页面加载完成后分页获取数据
            pageList(1, 5);

            // 点击查询按钮获取市场活动列表
            $("#searchBtn").click(function () {
                // 隐藏域中存入已查询的信息
                $("#hidden-name").val($.trim($("#search-name").val()));
                $("#hidden-owner").val($.trim($("#search-owner").val()));
                $("#hidden-startDate").val($.trim($("#search-startDate").val()));
                $("#hidden-endDate").val($.trim($("#search-endDate").val()));

                pageList(1, 5);
            });

            // 复选框绑定事件
            $("#allCheckbox").click(function () {
                $("input[name=xz]").prop("checked", this.checked);
            });
            /*
            以下这种做法是不行的:
                $("input[name=xz]").click(function () {
                    alert(123);
                })
            * 动态生成的元素，我们要以on方法的形式来触发事件
            * 语法：
                $(需要绑定元素的有效的外层元素).on(绑定事件的方式,需要绑定的元素的jquery对象,回调函数)
            *
            * */
            // 单选并勾全选框
            $("#activityTBody").on("click", $("input[name=xz]"), function () {
                $("#allCheckbox").prop("checked", $("input[name=xz]").length == $("input[name=xz]:checked").length);
            });

            // 删除按钮绑定事件
            $("#deleteBtn").click(function () {
                // 找到复选框勾选的记录
                var $xz = $("input[name=xz]:checked");
                if ($xz.length == 0) {
                    alert("请勾选要删除的市场活动！")
                } else {

                    // 删除提示框
                    if (confirm("是否删除记录？")) {
                        var param = "";

                        // 将$xz中每一个dom对象遍历出来，取value值，相当于取得要删除记录的id
                        for (var i = 0; i < $xz.length; i++) {
                            param += "id=" + $($xz[i]).val();
                            if (i < $xz.length - 1) {
                                param += "&";
                            }
                        }

                        $.ajax({
                            url: "/crm/workbench/activity/delete.do",
                            data: param,
                            type: "post",
                            dataType: "json",
                            success: function (data) {
                                if (data.success) {
                                    // 删除成功刷新列表
                                    pageList(1, 5);
                                } else {
                                    alert(data.msg);
                                }
                            }
                        });
                    }

                }
            });

            // 修改按钮绑定事件，打开市场活动模态窗口
            $("#editBtn").click(function () {
                // 获取复选框勾选的记录id
                var $xz = $("input[name=xz]:checked");
                if ($xz.length == 0) {
                    alert("请勾选要删除的市场活动！")
                } else {
                    var id = $xz.val();
                    // 将更新的记录id保存到隐藏域中
                    $("#edit-activityId").val(id);

                    // 从后台获取记录数据回显
                    $.ajax({
                        url: "/crm/workbench/activity/editGetUserListAndActivity.do",
                        data: {
                            "id": id
                        },
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            if (data.success) {
                                // 获取到用户列表数据填充到下拉框
                                var html = "<option></option>";
                                $.each(data.data.userList, function (i, n) {
                                    html += "<option value='" + n.id + "'>" + n.name + "</option>";
                                });
                                $("#edit-marketActivityOwner").html(html);

                                // 将当前编辑的记录默认展示在下拉框(在js中是用el表达式要在双引号中"$ {}")
                                $("#edit-marketActivityOwner").val(data.data.activityInfo.owner);

                                // 填充其他数据
                                $("#edit-marketActivityName").val(data.data.activityInfo.name);
                                $("#edit-startTime").val(data.data.activityInfo.startDate);
                                $("#edit-endTime").val(data.data.activityInfo.endDate);
                                $("#edit-cost").val(data.data.activityInfo.cost);
                                $("#edit-describe").val(data.data.activityInfo.description);

                            } else {
                                alert(data.msg);
                            }
                        }
                    });
                    // 打开添加模态框
                    $("#editActivityModal").modal("show");
                }

            });
        });

        // 分页查询函数
        function pageList(pageNo, pageSize) {

            //将全选的复选框的√干掉
            $("#qx").prop("checked", false);

            /*
            * 查询前，将隐藏域中保存的信息取出来，重新赋予到搜索框中
            * 作用：避免查询a后再输入b，再输入b没有点击查询按钮，点击下一页查询的是b的内容问题
            * */
            $("#search-name").val($.trim($("#hidden-name").val()));
            $("#search-owner").val($.trim($("#hidden-owner").val()));
            $("#search-startDate").val($.trim($("#hidden-startDate").val()));
            $("#search-endDate").val($.trim($("#hidden-endDate").val()));

            $.ajax({
                url: "/crm/workbench/activity/pageList.do",
                data: {
                    "pageNo": pageNo,
                    "pageSize": pageSize,
                    "owner": $.trim($("#search-owner").val()),
                    "name": $.trim($("#search-name").val()),
                    "startDate": $.trim($("#search-startDate").val()),
                    "endDate": $.trim($("#search-endDate").val())
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    // 查询结果渲染到列表展示
                    var html = "";
                    // 组装列表
                    $.each(data.data.datalist, function (i, n) {
                        html += '<tr class="active">';
                        html += '<td><input type="checkbox" name="xz" value="' + n.id + '"/></td>';
                        html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+n.id+'\';">' + n.name + '</a></td>';
                        html += '<td>' + n.owner + '</td>';
                        html += '<td>' + n.startDate + '</td>';
                        html += '<td>' + n.endDate + '</td>';
                        html += '</tr>';
                    });
                    // 填充列表
                    $("#activityTBody").html(html);

                    // 计算总页数
                    // var totalPages = data.data.total % pageSize == 0 ? data.data.total / pageSize : parseInt(data.data.total / pageSize) + 1;

                    // // 分页获取数据后，使用前端分页插件展示列表
                    // $("#activityPage").bs_pagination({
                    //     currentPage: pageNo, // 页码
                    //     rowsPerPage: pageSize, // 每页显示的记录条数
                    //     maxRowsPerPage: 20, // 每页最多显示的记录条数
                    //     totalPages: totalPages, // 总页数
                    //     totalRows: data.data.total, // 总记录条数
                    //
                    //     visiblePageLinks: 3, // 显示几个卡片
                    //
                    //     showGoToPage: true,
                    //     showRowsPerPage: true,
                    //     showRowsInfo: true,
                    //     showRowsDefaultInfo: true,
                    //
                    //     onChangePage: function (event, data) {
                    //         pageList(data.currentPage, data.rowsPerPage);
                    //     }
                    // });

                    // 将转换后的当前值转回当前页码
                    // pageNo = ((pageNo + pageSize) - 1) / pageSize;

                    // 自引入分页插件
                    $("#activityPage").sPage({
                        page: pageNo,//当前页码，必填
                        total: data.data.total,//数据总条数，必填
                        pageSize: pageSize,//每页显示多少条数据，默认10条
                        totalTxt: "共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
                        showTotal: true,//是否显示总条数，默认关闭：false
                        showSkip: true,//是否显示跳页，默认关闭：false
                        showPN: true,//是否显示上下翻页，默认开启：true
                        prevPage: "上一页",//上翻页文字描述，默认“上一页”
                        nextPage: "下一页",//下翻页文字描述，默认“下一页”
                        backFun: function (page) {
                            // 计算数据库中limit 当前页值
                            // pageNo = (page * pageSize) + 1 - pageSize;
                            // pageList((page * pageSize) + 1 - pageSize, pageSize);
                            pageList(pageNo, pageSize);
                            //点击分页按钮回调函数，返回当前页码
                            console.log(page);
                        }
                    });
                }

            });

        }

    </script>
</head>
<body>
<input type="hidden" id="hidden-name"/>
<input type="hidden" id="hidden-owner"/>
<input type="hidden" id="hidden-startDate"/>
<input type="hidden" id="hidden-endDate"/>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" id="activityForm" role="form">

                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-marketActivityOwner">
                                <option></option>
                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-marketActivityName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-startTime">
                        </div>
                        <label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-endTime">
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-describe"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">
                    <input type="hidden" id="edit-activityId"/>

                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-marketActivityOwner">
                                <option></option>
                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-marketActivityName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="edit-startTime">
                        </div>
                        <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="edit-endTime">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <%--
                            文本域：
                            1.一定是双标签，不要标签间没内容就闭合标签，且标签之间不要用空格、换行，这些都会当成文本内容
                            2.虽然以双标签形式呈现，但是它属于表单元素，所有对文本域的取值和赋值操作，应该统一使用val()方法
                            不是html()方法
                            --%>
                            <textarea class="form-control" rows="3" id="edit-describe"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateBtn">更新</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="search-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="search-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control time" type="text" id="search-startDate"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control time" type="text" id="search-endDate">
                    </div>
                </div>

                <button type="button" id="searchBtn" class="btn btn-default">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" id="addBtn">
                    <span class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button type="button" class="btn btn-default" id="editBtn">
                    <span class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-danger" id="deleteBtn"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>

        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <%--复选框--%>
                    <td><input id="allCheckbox" type="checkbox"/></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <%--分页列表展示--%>
                <tbody id="activityTBody"></tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">
            <!--分页插件-->
            <div id="activityPage"></div>
        </div>

    </div>

</div>
</body>
</html>